<template>
	<view class="main-class">
		
			<view class="header-class tn-flex justify-end" >
				<view class="status_bar" style="height: var(--status-bar-height); width: 100%; "></view>
				<tn-navbar height="45px" home-icon="" :bottom-shadow = "false" bg-color="tn-type-primary_bg" text-color="#FFFFFF" :before-back="back" > 促销详情 </tn-navbar>
				<view class="status_bar" style="height: var(--status-bar-height); width: 100%; "></view>
							
				<view class="tn-ml-sm tn-text-bold tn-text-lg tn-gray-light_text tn-flex tn-pt tn-pb " 	 @click="selClient">
					<span>{{hz.businessname}}</span>
					<tn-icon name="down-triangle" size="40" />
				</view>
			</view>	
		
		<view class="cards-class tn-mb-sm">
			<view class="tn-p-sm tn-text-lg tn-shadow-lg tn-text-ellipsis-3">{{prom.promName}}</view>
			
			<tn-title title="特价" mode="vLine" assist-color="tn-type-success"  size="xl" class="tn-p-sm"/>
			<view class="tn-ml-sm tn-mr-sm tn-shadow-md tn-flex card-class" v-for="(item,index) in promData" >
				
					<view class="tn-w-1-3" >
						<image :src="item.imgurl" class="image-class" @tap="handleImageTap(item.imgurl)" mode="aspectFit"></image>
					</view>
					<view class="tn-w-2-3 tn-p-xs  tn-ml-sm"  >
						<view class="tn-text-bold tn-text">
							{{item.goodsname}}
						</view>
						<view class="tn-text-ellipsis-2 tn-text-xs">
							{{item.manufacturer}}
						</view>
						<view class="tn-text-xs">
							{{item.goodsspec}}({{item.unit}}/{{item.wmsmeas}}/{{item.wmsutil}})
						</view>
						<view class="tn-text-xs">
							{{item.valdateinfo}}
						</view>
						<view class="tn-text-xs">
							{{item.stock}}
						</view>
						<view class="tn-text-xs">
							{{item.salepriceinfo}}
						</view>
						<view class="tn-text-xs">
							{{item.retailpinfo}}
						</view>
						<view class="tn-text-xs tn-red_text">
							{{item.numinfo}}
						</view>
						<view class="input-class tn-mt-xs">
								<tn-form-item label="数量" class="tn-text-bold tn-text-sm">
									<tn-input v-model="item.num" placeholder="请输入数量" size="sm" border-color="#000000" type="number"/>
								</tn-form-item>
						</view>
							 
						<tn-icon name="add-fill" color="#6caff6" size="60" class="card-icon-class" @click="doSaveProm(item)" />
						
						<!-- <view class="input-class tn-mt-xs"  v-if="item.istj=='N'">
							<tn-form-item label="价格" class="tn-text-bold tn-text-sm">
								{{item.lastsaleprice}}
								<tn-input v-model="item.taxprice" :placeholder="item.lastsalepriceinfo" 
								size="sm" border-color="#000000" :placeholder-style="placeholderStyle"
								type="text" inputmode="decimal"  min="0" max="999999" step="0.01" pattern="\d+(\.\d{1,2})?"
								/>
							</tn-form-item>
						</view> -->
					</view>
			</view>
			
		</view>
		<view class="bottom-buttons tn-flex tn-flex-start-end">
		  <!-- <tn-button type="success" size="xl" @click="doTurnAround">继续添加</tn-button> -->
		  <!-- <span>套数：</span> -->
		  <!-- <view class="tn-w-3-2 tn-mb-sm">
		  	<tn-input v-model="pieceNum" placeholder="请输入套数" :border="true" border-color="tn-red" type="number">
				<template #prefix> 套： </template>
		  	</tn-input>
		  </view> -->
		  
		  <view class="">
		  	<tn-button type="danger" size="xl" @click="toNavigateTo">去购物车</tn-button>
		  </view>
		  
		</view>
	</view>
</template>

<script setup>
	import { ref,reactive,onMounted  } from "vue"
	import { postCall  } from '@/api/index.js'
	import { EventBus } from '@/mitt/EventBus.js';
	import { toastMessage } from '@/utils/toast.js'
	import {onBackPress} from "@dcloudio/uni-app";
	
	const procName = "PROC_APP_DO_PROM";
	const promData = reactive([]); 
	const pageInfo = reactive({
		"page":1,
		"pageCount":20
	})
	const hz = reactive({
		"businessid":"",
		"businesscode":"",
		"businessname":"请选择客户"
	})
	let back = (val) =>{
		EventBus.emit('shoppingCount',null);
		return true;
	}
	onBackPress(()=>{
		EventBus.emit('shopClientInfo',null);
	})
	const pieceNum = ref(0);
	const prom = reactive({}); 
	onMounted(()=>{
		Object.assign(prom,uni.getStorageSync("PROM"));
		doGetProm().then(res=>{
			doGetClientData();
		});
		EventBus.on('clientInfo', (objParam) => {
			Object.assign(hz,objParam);
		});
	})
	const placeholderStyle = reactive({
		color:"#000000"
	})
	const searchValue = ref("")
	
	let doGetClientData = async () =>{
		let params = {};
		params["P_PROC_NAME"] = "PROC_APP_DO_CLASSIFY";
		params["P_ACTION"] = "CLIENT";		
		params["P_PAGE"] = 1;
		params["P_PAGESIZE"] = 10;
		await postCall(params).then(res=>{
			if(res){
				console.log(res);
				if(res.code===200){
					if(res.data.DATASET.length ===1 ){
						Object.assign(hz,res.data.DATASET[0]);
					}
				}
			}
		})
	}
	
	const doGetProm = async () =>{
		const serialnum = prom.serialnum;
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "QUERY";
		params["P_SERIALNUM"] = serialnum;
		await postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					Object.assign(promData,res.data.DATASET);
				}
			}
			
		})
	}
	const doSaveProm = (val) =>{
		const serialnum = prom.serialnum;
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "ADDTJ";
		params["P_SERIALNUM"] = serialnum;
		params["P_CLIENTID"] = hz.businessid;
		params["P_ADDRESSID"] = hz.addressid;
		params["P_RECEMANID"] = hz.recemanid;
		params["P_NUM"] = val.num;
		params["P_BILLSN"] = val.billsn;
		params["P_GOODSID"] = val.goodsid;
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					toastMessage("添加成功！");
				}
			}
		})
	}
	const searchInputEvent = () =>{
		
	}
	const searchBtnClickEvent = () =>{
		
	}
	let selClient = () =>{
		uni.navigateTo({
			url: '/pages/classify/client'
		})
	}
	let toNavigateTo = ()=>{
		
		uni.setStorageSync("index",2);
		uni.navigateTo({
		  url: '/pages/index/index'
		})	
	}
	const addShopping=(val)=>{
		let params = {};
		params["P_PROC_NAME"] = procNameShop;
		params["P_ACTION"] = "PROMADD";
		params["P_CLIENTID"] = hz.businessid;
		params["P_GOODSID"] = val.goodsid;
		params["P_TAXPRICE"] = val.taxprice;
		params["P_NUM"] = val.num;
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					toastMessage("添加成功！");
				}
			}
			
		})
	}
</script>

<style scoped>
	.header-class{
		height: 17vh !important;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #333;
		color: #fff;
		padding: 10px 0;
		text-align: center;
		z-index: 999 
	}
	.card-class{
		position: relative;
	}
	.cards-class{
		margin-top: 17vh;
		padding-bottom: 8.5vh;
	}
	.image-class{
		width: 100%;
		height: 100%;
	}
	.bottom-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff; /* 设置底部背景色 */
		padding: 10px; /* 设置内边距 */
		display: flex;
		justify-content: flex-end;
		box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* 设置底部阴影 */
		padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
		height: 8vh;
	}
	.card-icon-class{
		position: absolute;
		bottom: 70px; 
		right: 20px;
	}
</style>
